<!-- 孔德嘉 群聊 -->
<template>
  <div>
    <el-card>
      <el-page-header @back="goBack"> </el-page-header>
      <div>
        <el-form
          :model="groupForm"
          :rules="rules"
          ref="groupForm"
          label-width="100px"
          class="demo-ruleForm from"
          ><!--输入群聊名称 -->
          <el-form-item label="群聊名称" prop="groupName">
            <el-input v-model="groupForm.groupName"></el-input> </el-form-item
          ><!--选择病种类型 -->
          <el-form-item label="病种类型" prop="diseaseId">
            <el-select
              v-model="groupForm.diseaseId"
              placeholder="请选择病种类型"
            >
              <el-option
                v-for="item in diseaseList"
                :key="item.dataId"
                :label="item.dictLabel"
                :value="item.dataId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="群聊头像" prop="imageUrl">
            <!--上传群聊头像 -->
            <el-upload
              class="avatar-uploader" 
              :show-file-list="false"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="groupForm.imageUrl"
                :src="groupForm.imageUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item>
            <!-- 创建群聊 -->
            <el-button type="primary" @click="createGroup('groupForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('groupForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //群聊表单
      groupForm: {
        groupName: "",
        diseaseId: "", //病种类型
        imageUrl: "",
        createUserId: "", //创建人id
      },
      //病种列表
      diseaseList: [],
      file: File, // 图片文件
      //规则
      rules: {
        groupName: [
          { required: true, message: "请输入群聊名称", trigger: "blur" },
        ],
        diseaseId: [
          { required: true, message: "请选择病种类型", trigger: "change" },
        ],
        imageUrl: [
          { required: true, message: "请上传群聊图片", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.getDiseaseById();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    //上传成功方法
    handleAvatarSuccess(res, file) {},
    // 图片上传之前的校验方法
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
      this.groupForm.imageUrl = URL.createObjectURL(file);
      this.file = file;
      return false;
    },
    getDiseaseById() {
      //获取字典管理的病种数据
      const dicId = 4;
      this.$axios
        .get("/disease/getDiseaseById", {
          params: {
            dicId: dicId,
          },
        })
        .then((res) => {
          if (res.data.flag) {
            this.diseaseList = res.data.data;
          } else {
            this.$message("warning", res.data.code);
          }
        })
        .catch((err) => {
          this.$message("warning", "对不起，病种查询失败！"); // 添加或修改失败
        });
    },
    //加载中
    openFullScreen2() {
        const loading = this.$loading({
          lock: true,
          text: '正在生成群聊信息',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      },
      closeFullScreen2() {
        const loading = this.$loading({
          lock: true,
          text: '正在生成群聊信息',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 1);
      },
    //创建群聊
    createGroup(from) {
      this.openFullScreen2()
      // 添加医师 修改医师
      this.$refs[from].validate((valid) => {
        if (valid) {
          const formData = new FormData();
          if (this.file) {
            formData.set("file", this.file, this.file.name);
          }
          formData.set("groupName", this.groupForm.groupName);
          formData.set("diseaseId", this.groupForm.diseaseId);
          formData.set("createUserId", this.$store.state.user.userId);
          this.$axios
            .post("/group/createGroup", formData)
            .then((res) => {
              
              if (res.data.flag) {
                this.closeFullScreen2()
                // 弹窗弹出群号
                this.$alert(
                  "恭喜你，群聊创建成功！群号是： <strong>" +
                    res.data.data.groupNum +
                    "</strong>。",
                  "创建成功",
                  { dangerouslyUseHTMLString: true, confirmButtonText: "确定" }
                );
                //发送给websocket
                this.$emit('createGroup',res.data.data.groupId)
                //跳转页面
                this.$router.push("/group/index")
              } else {
                this.$message("warning", res.data.code);
              }
            })
            .catch((err) => {
              this.$message("warning", "对不起，保存失败，请您稍后再试！"); // 添加或修改失败
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.from {
  margin-top: 30px;
  width: 500px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/deep/ .el-range-editor.is-active,
/deep/ .el-range-editor.is-active:hover,
/deep/ .el-select .el-input.is-focus .el-input__inner {
  border-color: #2cd3b5;
}
/deep/ .el-input.is-active .el-input__inner,
/deep/ .el-input__inner:focus {
  border-color: #2cd3b5;
}
.el-button--primary {
  color: #fff;
  background-color: #2cd3b5;
  border-color: #2cd3b5;
}
/deep/ .el-button:active {
  color: #2cd3b5;
  border-color: #2cd3b5;
  outline: 0;
}
/deep/ .el-button:focus,
/deep/ .el-button:hover {
  color: #2cd3b5;
  border-color: #2cd3b473;
  background-color: #ecffef;
}
</style>